<template>
  <div>
    <ContentWrap title="表单配置">
      <Form
        :schema="schema"
        :model="node"
        @register="formRegister"
        :isCol="false"
        label-width="200px"
        :rules="rules"
      />
      <div v-if="readonly == false" style="text-align: center; margin-top: 10px; width: 100%">
        <el-space>
          <BaseButton type="primary" @click="saveForm">保存</BaseButton>
          <BaseButton @click="reset">重置</BaseButton>
        </el-space>
      </div>
    </ContentWrap>
    <ContentWrap v-if="curForm != defFormId && curForm" title="数据传递" style="margin-top: 10px">
      <Table :data="powers" :columns="columns" :showAction="false">
        <template #colId="e">
          <formColChiose
            v-model="e.row.ColId"
            :form-id="curFormId"
            @change="
              (val, form) => {
                e.row.FormId = form.col?.FormId
              }
            "
          />
        </template>
        <template #keywords="e">
          <el-input v-model="e.row.Keywords" placeholder="筛选方案名" clearable />
        </template>
        <template #action="e">
          <BaseButton :icon="dropIcon" size="small" type="danger" circle @click="remove(e.row)" />
        </template>
      </Table>
      <div v-if="readonly == false" style="text-align: center; margin-top: 10px; width: 100%">
        <el-space>
          <BaseButton type="primary" @click="savePower">保存</BaseButton>
          <BaseButton @click="load">重置</BaseButton>
        </el-space>
      </div>
    </ContentWrap>
  </div>
</template>

<script>
import { EnumDic } from '@/flow/config/flowConfig'
import * as flowNodeApi from '@/flow/api/flowNode'
import { GetFormId } from '@/flow/api/flow'
import * as relationApi from '@/flow/api/flowNodeRelation'
import { formColChiose } from '@/customForm/components/form/'
import { GetStructures } from '@/customForm/api/form'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { Table } from '@/components/Table'
const { formRegister, formMethods } = useForm()
import { useIcon } from '@/hooks/web/useIcon'
export default {
  components: {
    formColChiose,
    Form,
    Table
  },
  props: {
    source: {
      type: Object,
      default: () => {
        return {
          FormId: null,
          IsAllowEdit: false
        }
      }
    },
    nodeId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    defFormId: {
      type: String,
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      EnumDic,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      node: {},
      powers: [],
      curFormId: [],
      nodeFormId: [],
      schema: [],
      formIds: null,
      curForm: null,
      toForm: null,
      id: 1,
      columns: [
        {
          field: 'ColId',
          label: '来源表单字段',
          align: 'center',
          slotName: 'colId'
        },
        {
          field: 'toLabel',
          label: '对应表单字段',
          align: 'left'
        },
        {
          field: 'Keywords',
          label: '筛选方案名',
          align: 'center',
          slotName: 'keywords',
          with: '120px'
        }
      ]
    }
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.reset()
          this.init(this.source.FormId)
        }
      },
      immediate: true
    },
    flowId: {
      handler(val) {
        if (val) {
          this.loadFormId()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    formRegister,
    initScheme() {
      this.schema = [
        {
          field: 'FormId',
          label: '审核表单',
          component: 'FormInput',
          componentProps: {
            readonly: this.readonly,
            placeholder: '选择表单',
            prtFormClassify: '02',
            formType: [0, 1]
          }
        },
        {
          field: 'IsAllowEdit',
          label: '是否允许编辑',
          component: 'Switch',
          componentProps: {
            disabled: this.readonly
          }
        }
      ]
    },
    async saveForm() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      }
      await this.set(data)
    },
    async savePower() {
      const list = this.powers.filter((c) => c.ColId != null)
      await relationApi.Sync({
        FlowId: this.flowId,
        NodeId: this.nodeId,
        Relations: list.map((c) => {
          return {
            ColId: c.ColId,
            FormId: c.FormId,
            ToColId: c.ToColId,
            Keywords: c.Keywords
          }
        })
      })
      this.$message({
        message: '保存成功!',
        type: 'success'
      })
    },
    async set(data) {
      const res = await flowNodeApi.SetForm(this.nodeId, data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      if (res) {
        this.curForm = data.FormId
        this.$emit('refresh', data)
        this.init(data.FormId)
      }
    },
    reset() {
      this.node = {
        FormId: this.source.FormId,
        IsAllowEdit: this.source.IsAllowEdit
      }
      this.curForm = this.source.FormId
      formMethods.setValues(this.node)
      this.initScheme()
    },
    init(formId) {
      if (formId != null) {
        this.curFormId = this.formIds.filter((c) => c !== formId)
      } else if (this.defFormId != null) {
        this.curFormId = this.formIds.filter((c) => c !== this.defFormId)
      } else {
        this.curFormId = []
      }
      if (formId != null) {
        this.nodeFormId = [formId]
        this.loadToForm(formId)
      } else {
        this.nodeFormId = null
        this.toForm = null
        this.powers = []
      }
    },
    async loadFormId() {
      this.formIds = await GetFormId(this.flowId)
    },
    async loadToForm(formId) {
      const res = await GetStructures({
        FormId: this.nodeFormId,
        IsSystem: false
      })
      this.toForm = res
      this.load()
    },
    loadCols(to, powers, list, label, formId) {
      if (to.Type === 4) {
        formId = to.Id
      }
      if (to.Children != null && to.Children.length > 0) {
        if (label == null) {
          label = to.Label
        } else {
          label = label + '/' + to.Label
        }
        to.Children.forEach((c) => {
          this.loadCols(c, powers, list, label, formId)
        })
      } else if (to.Type === 2) {
        const t = powers.find((a) => a.ToColId === to.Id)
        const data = {
          ColId: null,
          FormId: formId,
          ToColId: to.Id,
          toLabel: label + '/' + to.Label,
          Keywords: null
        }
        if (t != null) {
          data.ColId = t.ColId
          data.Keywords = t.Keywords
        }
        list.push(data)
      }
    },
    async load() {
      let res = await relationApi.Gets(this.nodeId)
      const list = []
      if (res == null) {
        res = []
      }
      this.toForm.forEach((c) => {
        this.loadCols(c, res, list, null, null)
      })
      this.powers = list
    }
  }
}
</script>
